<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.prime.com.tr/ui">

    <ui:composition template="WEB-INF/facelets/template.xhtml">
        <ui:param name="title" value="View entry" />

        <ui:define name="content">
            <h:outputScript library="js" name="resetForm.js" target="head" />

            <div class="textCentered">
                <h:outputText value="#{imageViewBackingBean.image.imageLocation}" /><br/>
				<p:lightBox speed="10">
					<h:outputLink value="./image/#{imageViewBackingBean.image.imageLocation}" >
						<h:graphicImage style="max-width: 800px; max-height: 800px;" id="entryImage" url="image/#{imageViewBackingBean.image.imageLocation}" />
					</h:outputLink>
				</p:lightBox>
                <div class="ratingContainer">
                    <h:form>
                        <h:panelGrid columns="2" cellpadding="5" styleClass="pandelGrid">
                            <h:outputText value="Average rating: "/><p:rating id="averageRating" stars="5" value="#{imageViewBackingBean.averageRating}" disabled="true" />
                            <h:outputText value="Rate: " rendered="#{userSessionBean.loggedIn}" />

                            <p:rating stars="5" value="#{imageViewBackingBean.myRating}" 
                                      rateListener="#{ratingControllerBean.handleRate}" 
                                      update=":averageRating" rendered="#{userSessionBean.loggedIn}"
                                      disabled="#{not imageViewBackingBean.canRate}">
                                <f:attribute name="entryId" value="#{imageViewBackingBean.entryId}" />
                            </p:rating>

                        </h:panelGrid>
                    </h:form>
                </div>
                
                <div class="commentListContainer">
                    <!-- Comments -->
                    <h:panelGroup id="commentList">
                        <!-- Comments -->
                        <b><h:outputText value="Comments" /></b>
                        <ui:repeat value="#{imageViewBackingBean.comments}"  var="comment">
                            <h:panelGrid columns="1" styleClass="commentContainer">
                                <h:outputText styleClass="commentUserName" value="#{comment.user.username}" />

                                <h:outputText value="#{comment.commentText}" styleClass="commentText"/>

                                <h:outputText value="#{comment.added}" styleClass="commentTime">
                                    <f:converter converterId="com.ocpsoft.PrettyTimeConverter"/>
                                </h:outputText>
                            </h:panelGrid>
                        </ui:repeat>
                    </h:panelGroup>

                    <!-- Create comment input -->
                    <h:panelGroup rendered="#{userSessionBean.loggedIn}">
                        <div style="margin-top:20px;">
                            <h:form id="commentForm">
                                <h:inputTextarea styleClass="commentTextArea" value="#{commentBackingBean.text}" style="width:100%; height:100px;"/>
                                <h:commandButton styleClass="commentSendButton" value="Send" action="#{commentingControlBean.send}">
                                    <f:param name="id" value="#{imageViewBackingBean.entryId}"/>  
                                    <f:setPropertyActionListener target="#{commentBackingBean.entryId}" value="#{imageViewBackingBean.entryId}" />
                                    <f:ajax execute="@form" render=":commentList" />
                                </h:commandButton>
                            </h:form>
                        </div>
                    </h:panelGroup>
                </div>
            </div>
        </ui:define>
    </ui:composition>
</html>